require('../../assets/css/public.less')
require('./desc.less');

// 服务器地址
const API = 'http://fitness.h5.itsource.cn:3701'
// 引入axios
const request = require('../../lib/request/request')

window.onload = () => {
    function $(sel) {
        return document.querySelector(sel)
    }

    function $a(sel) {
        return document.querySelectorAll(sel)
    }
    //获取用户信息
    function getUserInfo() {
        request.get('/api/user/info').then(res => {
            //1 解构数据
            let { errno, data } = res.data
            //2 判断
            if (errno === 0) {
                //3 处理业务逻辑
                render(data)
            }
        })
    }

    //渲染数据
    function render(data) {
        //图片渲染 服务器地址+相对路径+文件名
        avatar.src = API + data.imgUrl
        // 呢称
        nickname.value = data.nickName
        // 性别
        sex.textContent = data.gender ?? '请选择性别' //空值合并
        // 生日
        selBirthday.textContent = data.birthday ?? '请选择生日' //空值合并
        text.value = data.sign

    }

    //初始化获取用户信息
    getUserInfo()

    //监听file 输入框的change事件
    upload.addEventListener('change', e => {
        console.log('e :>> ', e.target.files[0])
        //创建FormData 对象 添加文件
        const formData = new FormData()
        formData.append('file', e.target.files[0])
        // console.log(22);
        //发送ajax请求
        request.post('/api/shared/uploadPortrait', formData).then(res => {
            // console.log(11);
            console.log('res.data :>> ', res.data)
            //图片渲染 服务器地址+相对路径+文件名
            avatar.src = API + res.data.data.url
        })
    })

    //获取dom  性别
    const showPicker = document.querySelector('#showPicker')
    showPicker.addEventListener('click', () => {
        weui.picker(
            [
                {
                    label: '男',
                    value: 0,
                },
                {
                    label: '女',
                    value: 1,
                },
            ],
            {
                onConfirm: function (result) {
                    sex.textContent = result.map(v => { return v.label })
                },
                title: '性别选择',
            }
        )
    })

    //获取dom  生日
    const showDatePicker = document.querySelector('#showDatePicker')
    //监听下拉点击
    showDatePicker.addEventListener('click', () => {
        console.log('666 :>> ', 666)
        weui.datePicker({
            start: 1990,
            end: new Date().getFullYear(),

            onConfirm: function (result) {
                console.log(result)
                /* selBirthday.textContent = result.map(v => {
                    return v.label

                }).join('') */
                selBirthday.textContent = result.map(v => String(v.value).padStart(2, '0')).join('-')
            },
            title: '生日选择',
        })
    })

    //  省份
    let provinces = [] //储存省份

    function prov() {
        request.get('/api/shared/province').then(res => {
            //解构数据
            let { errno, data } = res.data
            //判断
            if (errno === 0) {
                //处理数据
                provinces = data.map(v => {
                    return {
                        label: v.name,
                        value: v.id,
                    }
                })
            }
        })
    }
    prov()

    // 省份选择
    let provinceId1 = ''
    showProvince.addEventListener('click', () => {
        weui.picker(provinces, {
            //确定才选中
            onConfirm: function (result) {
                province.textContent = result[0].label
                provinceId1 = result[0].value
                // 获取城市信息
                cit(provinceId1)
                // console.log(result[0].value);
            },
            title: '省份选择',
        })
    })

    // 城市
    let cityId = '' //储存城市
    let pickstorge = null //存储第二次的数据
    function cit(provinceId) {
        // console.log('city');
        request.get('/api/shared/city', {
            params: {
                provinceId,
            },
        }).then(res => {
            console.log(provinceId);
            //解构数据
            let { errno, data } = res.data
            //判断
            if (errno === 0) {
                console.log(1);
                //处理数据
                let citys = data.map(v => {
                    return {
                        label: v.name,
                        value: v.id,
                    }
                })

                function fun() {
                    console.log(2);
                    weui.picker(citys, {
                        //确定才选中
                        onConfirm: function (result) {
                            // console.log(1);
                            console.log(result)
                            chengdu.textContent = result[0].label
                            cityId = result[0].value
                        },
                        title: '城市选择',
                    })
                }

                showCity.removeEventListener('click', pickstorge)
                pickstorge = fun
                // 城市选择
                showCity.addEventListener('click', fun)
            }
        })
    }


    // 个人简介
    text.addEventListener('input', (v) => {
        numchange.textContent = text.value.length
    })

    // 提交表单
    submit.addEventListener('click', () => {
        request
            .post('/api/user/changeInfo', {
                nickName: nickname.value,
                gender: sex.textContent,
                provinceId: provinceId1,
                cityId: cityId,
                birthday: selBirthday.textContent,
                imgUrl: avatar.src.replace(API, ''),
                sign: text.value,
            })
            .then(res => {
                console.log('res.data :>> ', res.data)
                //解构数据
                let { errno, data } = res.data
                //判断
                if (errno === 0) {
                    //更新token
                    localStorage.setItem('token', 'Bearer ' + data.token)
                }
            })
    })
}